<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue框架 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        /* 设置模态框头部样式 */
        .el-dialog__header {
            background-color: cyan;
        }
    </style>
</head>

<body>
    <!-- 模板 视图层 -->
    <div id="app">
        <!-- 第一行 输入框 搜索 新增 -->
        <el-form size="small" :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="form.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button plain type="primary" @click="toAdd">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 第二行 表格 -->
        <div>
            <!-- data属性表示表格数据源 显示数据 -->
            <el-table :data="tableData" border style="width:60%">
                <!-- label表示表格列列名 prop表示这一列显示内容 -->
                <el-table-column align="center" label="序号" width="60" type="index" :index="1"></el-table-column>
                <!-- el-table-column表示表格一列 width表示表格列宽度 -->
                <el-table-column prop="date" label="日期" align="center">
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center">
                </el-table-column>
                <el-table-column prop="address" label="地址" align="center">
                </el-table-column>
                <!-- 操作列 -->
                <el-table-column label="操作" align="center">
                    <!-- 作用域插槽 获取当前行数据 scope表示当前作用域数据 scope.row -->
                    <template v-slot="scope">
                        <!-- 删除 和 编辑按钮 -->
                        <el-button @click="toEdit(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 第三行 分页按钮 -->
        <div class="page" style="margin-top: 10px;">
            <el-pagination background :current-page="1" :page-sizes="[2, 5, 8, 10]" :page-size="5"
                layout="total, sizes, prev, pager, next, jumper" :total="10">
            </el-pagination>
        </div>
        <!-- 新增和修改模态框 visible属性控制模态框显示与隐藏属性 -->
        <el-dialog :title="title" :visible.sync="visible">
            <el-form :model="formSave" size="small">
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-date-picker v-model="formSave.date" type="datetimerange" :picker-options="pickerOptions"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="formSave.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input v-model="formSave.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="visible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <script>
        // 创建vue实例 
        new Vue({
            el: "#app",
            data: {
                // 表单对象  存放用户填写数据 发送在后端
                form: {},
                // 模态框标题
                title: "录入信息",
                // 表格数据源 
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: 'terry',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: 'larry',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: 'ronda',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                // 表单标签域宽度 
                formLabelWidth: '120px',
                // 新增和修改表单对象
                formSave: {},
                // 控制模态框显示与隐藏变量
                visible: false,
                // 时间日期快捷选项
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            },
            methods: {
                // 去新增
                toAdd() {
                    // 显示模态框 
                    this.visible = true;
                    this.title = '录入信息';
                    // 清空表单对象 
                    this.formSave = {};
                },
                // 去编辑
                toEdit(row) {
                    console.log(row,'获取当前行数据');
                    this.visible = true;
                    this.title = '修改信息';
                    // 将当前行数据设置给修改表单对象
                    this.formSave = {...row};
                }
            }
        })
    </script>
</body>

</html>